import React, { useMemo } from 'react';
import './list.less';

const classPrefix = 'bbt-react-list';

export type ListProps = {
  /** 每个子项的间隙, 需带单位 */
  gap?: string;
  /** 容器上下左右padding距离 */
  padding?: number | string;
  styles?: React.CSSProperties;
  className?: string;
  children?: React.ReactNode[];
};

const List: React.FC<ListProps> = ({
  gap = '4px',
  styles = {},
  className = '',
  padding = 0,
  children,
}: ListProps) => {
  const clsName = useMemo(() => {
    const base = `${classPrefix} ${className}`;
    const vaildChild = children?.filter?.(React.isValidElement);
    return vaildChild?.length && vaildChild?.length > 1
      ? `${base} ${classPrefix + '-mutiple'}`
      : base;
  }, [children]);

  const cssVars: React.CSSProperties & Partial<Record<string | never, string>> =
    useMemo(() => {
      return { '--bbt-list-gap': gap };
    }, [gap]);

  return (
    <div
      style={{
        ...styles,
        padding,
        boxSizing: 'border-box',
        ...cssVars,
      }}
      className={`${clsName}`}
    >
      {children}
    </div>
  );
};

export { List };
